<template>
  <div class="container">
    <div class="top">
      <img
        src="https://img.youpin.mi-img.com/static/weex_images/v1/m/navi_title_v6.png"
        alt
        class="logo"
      />
      <div class="search">
        <i class="search-icon">
          <van-icon name="circle" size="1.25rem" />
        </i>

        <span class="search-text">小米10 Pro</span>

        <i class="notice-icon">
          <van-icon name="scan" size="1.25rem" />
        </i>
      </div>
      <img
        src="https://img.youpin.mi-img.com/static/weex_images/v1/m/navi_title_v6.png"
        alt
        class="logo"
      />
    </div>
    <!-- <div class="header"></div> -->

    <div class="content">
      <div class="radian"/>
      <div class="swipeDiv">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,inx) in swipeImgList" :key="inx">
            <img class="swipe-img" :src="item" alt />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="main-content">
        <div class="cateSwipe">
          <van-swipe :autoplay="0" indicator-color="white">
            <van-swipe-item>
              <ul class="cate">
                <li v-for="(item,inx) in cateImgList[0]" :key="inx">
                  <img :src="item" alt class="cate-img" />
                </li>
              </ul>
              <ul class="cate">
                <li v-for="(item,inx) in cateImgList[1]" :key="inx">
                  <img :src="item" alt class="cate-img" />
                </li>
              </ul>
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="crowd">
          <div class="crowd-title">
            <b>小米众筹</b>
            <span class="more">更多></span>
          </div>
          <div class="crowd-content">
            <div class="crowd-main">
              <div class="detail">
                <div class="detail-title">宠物除菌护理梳</div>
                <div class="detail-desc">预防宠物皮肤疾病，一梳搞定！</div>
                <b class="detail-price">¥199元</b>
              </div>
              <div class="detail-image">
                <img
                  src="https://img.youpin.mi-img.com/shopmain/9cd5bf86c4cee57c8bc3b34dad1b607a.png@base@tag=imgScale&F=webp&h=264&w=264"
                  alt
                />
              </div>
            </div>
            <div class="crowd-footer">
              <div class="progress-desc">
                <img
                  src="https://img.youpin.mi-img.com/youpinoper/a76c2e68d4bcff4878941a61977e805a.png"
                  alt
                  class="heat-icon"
                />
                <div>
                  支持人数
                  <span class="goldren">2906</span> / 完成度
                  <span class="goldren">145%</span>
                </div>
              </div>
              <div class="progress" />
            </div>
          </div>
          <ul class="crowd-two">
            <li>
              <div class="crowd-two-name">轻体代餐蛋白棒</div>
              <div class="two-main">
                <div class="two-main-left">¥69起</div>
                <div class="two-main-right">
                  <img
                    src="https://img.youpin.mi-img.com/shopmain/297bdcef4d99bba50c146b7da69aefce.png@base@tag=imgScale&F=webp&h=150&w=150"
                    alt
                  />
                </div>
              </div>
              <div class="two-footer">
                <div class="progress-desc">
                  <img
                    src="https://img.youpin.mi-img.com/youpinoper/fa4ba9e97ab9ed5c17dd82fd3d2d2708.png"
                    alt
                    class="heat-icon"
                  />
                  <div>
                    支持人数
                    <span class="goldren">2906</span>
                  </div>
                </div>
                <div class="progress" />
              </div>
            </li>
            <li>
              <div class="crowd-two-name">样子岩板餐桌椅</div>
              <div class="two-main">
                <div class="two-main-left">¥929起</div>
                <div class="two-main-right">
                  <img
                    src="https://img.youpin.mi-img.com/shopmain/b3c79e276017028ac14420a988b1335e.png@base@tag=imgScale&F=webp&h=150&w=150"
                    alt
                  />
                </div>
              </div>
              <div class="two-footer">
                <div class="progress-desc">
                  <img
                    src="https://img.youpin.mi-img.com/youpinoper/fa4ba9e97ab9ed5c17dd82fd3d2d2708.png"
                    alt
                    class="heat-icon"
                  />
                  <div>
                    支持人数
                    <span class="goldren">569</span>
                  </div>
                </div>
                <div class="progress" />
              </div>
            </li>
          </ul>
        </div>
        <ul class="nav">
          <li>
            <a class="active">精选</a>
          </li>
          <li>
            <a href>智能</a>
          </li>
          <li>
            <a href>生活</a>
          </li>
          <li>
            <a href>手机</a>
          </li>
          <li>
            <a href>电器</a>
          </li>
          <li>
            <a href>时尚</a>
          </li>
          <li>
            <a href>特惠</a>
          </li>
        </ul>

        <div class="list">
          <ul>
            <li>
              <img
                src="https://img.youpin.mi-img.com/shopmain/68b80d5a7b305688405411c647b76718.jpg@base@tag=imgScale&F=webp&h=342&w=342"
                alt
              />
              <div class="item-detail">
                <div class="item-name">无线地面清洗机</div>
                <div class="item-desc">洗拖一体干湿通吃，深度清洁</div>
                <div class="item-price">
                  ¥1499
                  <del>¥1599</del>
                </div>
              </div>
            </li>
            <li>
              <img
                src="https://img.youpin.mi-img.com/pic_square/774_2da5992fafcb386cf26a0206cd017372.jpg@base@tag=imgScale&F=webp&h=342&w=342"
                alt
              />
              <div class="item-detail">
                <div class="item-name">无线手持擦地机</div>
                <div class="item-desc">轻松操作持久续航</div>
                <div class="item-price">
                  ¥569
                  <del>¥599</del>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 

    <ul class="cateGrid">
      <li v-for="(item,inx) in cateImgList" :key="inx">
        <img :src="item" alt />
      </li>
    </ul>
    <div class="ad">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/189acdf7e9b807cfc22d394df87c1958.jpg?thumb=1&w=720&h=280"
        alt
      />
    </div>-->

    <!-- <div class="boxList">
      <ul>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7ed6090953a4edca0ee6bc4b36cb4a9e.jpg?thumb=1&w=344&h=280"
            alt
          />
          <span class="name">小米10 Pro</span>
          <span class="desc">骁龙865 / 50倍变焦</span>
          <span class="price">¥4999起</span>
          <button class="buyBtn">立即购买</button>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9b3b7c52bffab0806c54652ee0872a64.jpg?thumb=1&w=344&h=280"
            alt
          />
          <span class="name">小米10</span>
          <span class="desc">骁龙865 / 1亿像素相机</span>
          <span class="price">¥3999起</span>
          <button class="buyBtn">立即购买</button>
        </li>
      </ul>
      <ul>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7ed6090953a4edca0ee6bc4b36cb4a9e.jpg?thumb=1&w=344&h=280"
            alt
          />
          <span class="name">小米10 Pro</span>
          <span class="desc">骁龙865 / 50倍变焦</span>
          <span class="price">¥4999起</span>
          <button class="buyBtn">立即购买</button>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9b3b7c52bffab0806c54652ee0872a64.jpg?thumb=1&w=344&h=280"
            alt
          />
          <span class="name">小米10</span>
          <span class="desc">骁龙865 / 1亿像素相机</span>
          <span class="price">¥3999起</span>
          <button class="buyBtn">立即购买</button>
        </li>
      </ul>
    </div>

    <div class="footer">
      <img
        src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/bbb5bac8089d890338b5bf8ff742cbbc.png?thumb=1&w=720&h=106"
        alt
      />
    </div>-->
  </div>
</template>
<style lang="less" scoped >
@import url("./index.less");
</style>
<script>
import { mapGetters, mapState } from "vuex";
export default {
  name:"main-index",
  data() {
    return {
      value: "",
      swipeImgList: [
        `https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ff3e608e7f4587b5bf62ea59efaf26e9.jpg?thumb=1&w=720&h=360`,
        `https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b9b4dbb30c6d0f0e7ab96302e111a18a.jpg?thumb=1&w=720&h=360`,
        `https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bd7349fbb622ef89d3837327be4b3682.jpg?thumb=1&w=720&h=360`
      ],
      cateImgList: [
        [
          `https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb65daec7ef7b52cc785f88f78efba37.png?thumb=1&w=144&h=152`,
          `https://i8.mifile.cn/v1/a1/eb5024fe-dfe3-6e53-3e18-675bef5fa06e.webp`,
          `https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a3d25fdc76472277b6d342d12aa7ebe.jpg?thumb=1&w=144&h=152`,
          `https://i8.mifile.cn/v1/a1/e8bc849a-0a3b-21a0-6810-7da3a3903dee.webp`,
          `https://i8.mifile.cn/v1/a1/7dbcbf87-6a58-adb6-2f3f-bb3dae3e9c80.webp`
        ],
        [
          `https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/64f3988b6216e4c1ab62a7f50df3e816.png?thumb=1&w=144&h=152`,
          `https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ea68dee2bfa0e55a82236b0d968e975.png?thumb=1&w=144&h=152`,
          `https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/96c780016ea196743905dc93f9249c39.png?thumb=1&w=144&h=152`,
          `https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9425031cdd7af22d9a23a5ae16d1f57c.jpg?thumb=1&w=144&h=152`,
          `https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f11f9df6b0b0b428f8c8fc3267131830.png?thumb=1&w=144&h=152`
        ]
      ]
    };
  },
  computed: {
    ...mapState({
      statusVal: state => state.user.status,
      loginVal: state => state.isLogin
    }),
    ...mapGetters("user", {
      statusTitleAlias: "statusTitle"
    })
  },
  methods: {
    onSearch() {},
    onCancel() {},
    clickBtnName() {
      this.$store.dispatch("user/toggleStatus", 2);
    },
    clickBtn() {
      this.$store.dispatch("userLogin");
    }
  }
};
</script>
<style lang="less">
</style>